<template>
	<view class="row" style="margin-top: 5px;">
		<view class="btn-count pointer" @click="jie()" :style="inputVal == 1 ? 'background-color:#f5f5f5;' : ''">
			<view class="iconfont icon-move btn-count-icon"></view>
		</view>
		<input class="input-count" v-model="inputVal" @input="changeInputVal" />
		<view class="btn-count pointer" @click="jia()">
			<view class="iconfont icon-add btn-count-icon"></view>
		</view>
		<view v-if="showMax" class="btn-count" style="width: auto;padding: 0 5px;margin-left: 15px;" @click="setMax()">
			<view class="iconfont btn-count-icon">max</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-number-box",
		props: {
			value: {
				type: Number,
				default: function() {
					return 1
				}
			},
			min: {
				type: Number,
				default: function() {
					return 1
				}
			},
			max: {
				type: Number,
				default: function() {
					return 10000
				}
			},
			showMax:{
				type: Boolean,
				default: function() {
					return false
				}
			}
		},
		data() {
			return {
				inputVal: ''
			}
		},
		created() {
			this.inputVal = this.value;
		},
		computed: {},
		methods: {
			setMax(){
				this.inputVal = parseInt(this.max);
				this.$emit("input", this.max);
			},
			changeInputVal(e) {
				this.inputVal = parseInt(e.detail.value);
				this.$emit("input", this.inputVal);
			},
			jia() {
				let inputVal = this.inputVal + 1;
				this.inputVal = this.max < inputVal ? this.max : inputVal;
				if (this.min > this.inputVal) {
					this.inputVal = this.min;
				}
				this.$emit("input", this.inputVal);
			},
			jie() {
				let inputVal = this.inputVal - 1;
				this.inputVal = this.min > inputVal ? this.min : inputVal;
				this.$emit("input", this.inputVal);
			}
		}
	}
</script>

<style scoped>
	.btn-count {
		width: 30px;
		height: 30px;
		background-color: #eee;
		border-radius: 3px;
		text-align: center;
	}

	.btn-count-icon {
		line-height: 30px;
		font-size: 14px;
		color: #aaa
	}

	.input-count {
		width: 38px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 13px;
	}
</style>
